<template>
  <div class="department-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <!-- 按钮 -->
          <div class="btn-wrap">
            <el-button type="primary" @click="addRoleBtn">主要按钮</el-button>
            <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
          </div>
          <!-- table表格的位置 -->
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
              />
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="description"
                label="描述"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button type="success" size="mini" @click="assignPer(scope.row.id)">分配权限</el-button>
                  <el-button size="mini" @click="editRoleBtn(scope)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="deleteRoleBtn(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页插件的位置 -->
          <el-pagination
            :current-page.sync="form.page"
            :page-sizes="[2,4,6,8]"
            :page-size="form.pagesize"
            layout="prev, pager, next,total,sizes"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            />
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 对话框最后会放在body上面,源码document.body.appendChild(modal) -->
    <el-dialog
      :title="isEdit ? '编辑角色':'新增角色'"
      :visible.sync="dialogVisible"
      width="60%"
      @close="dialogClosBtn"
    >
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="formDialog.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formDialog.description" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ isEdit ? '编辑角色':'新增角色' }}</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form></el-dialog>
    <!-- 分配权限的弹出框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogPermissionVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <AssignPermission v-if="dialogPermissionVisible " :current-id="currentId" @close="dialogPermissionVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import { getRolesListRequest, addRoleRequest, updateRoleByIdRequest, deleteRoleByIdRequest } from '@/api/setting'
import _ from 'lodash'
import AssignPermission from './AssignPermission.vue'
export default {
  // 为了在vue-tools里面查找组件，一般会给组件写个唯一的名称
  name: 'SettingsCom',
  components: { AssignPermission },
  // 父向子传值,子组件是不能修改父组件的值
  // 假设我们想修改这个值,将props的值,赋值给当前组件自己的data上面的私有数据
  props: ['aaa'],
  // data上面的数据是属于当前组件自己的,props的数据是父组件的
  data() {
    return {
      currentId: '',
      dialogPermissionVisible: false,
      test: this.aaa,
      activeName: 'first',
      tableData: [],
      form: {
        page: 1,
        pagesize: 2
      },
      dialogVisible: false,
      formDialog: {
        name: '',
        description: ''
      },
      total: 0,
      // 控制当前模态框是否提示或者隐藏---新增的时候修改false,编辑的时候修改为ture
      isEdit: false
    }
  },
  computed: {
    // 最大的页码值： 一共5项  每页显示2条  5/2 = 2.5  3页
    maxPageNum() {
      return Math.ceil(this.total / this.form.pagesize)
    },
    // 最后一页是否填满
    isLastPageFull() {
      return this.total % this.form.pagesize === 0
    }
  },
  created() {
    this.getRolesList()
    // 这里加不加 await 都可以， 取决于下面代码是否依赖上面代码的完成
  },
  methods: {
    assignPer(id) {
      this.dialogPermissionVisible = true
      this.currentId = id
    },
    async getRolesList() {
      try {
        const res = await getRolesListRequest(this.form)
        console.log(res)
        // 业务代码成功走的if条件
        // 如果不知道请求的 业务判断成功或失败的 属性的话，就去问后端，
        // 你用的是什么属性来判断 当前请求成功或失败 res.code === 10000 成功  10000-20000失败
        if (res.success) {
          this.tableData = res.data.rows
          this.total = res.data.total
        } else {
          // 如果请求成功，但是业务失败
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('获取角色列表失败')
        this.$message.error('获取角色列表失败')
      }
    },
    handleSizeChange(value) {
      // 每页显示条数的改变
      this.form.page = 1
      this.form.pagesize = value
      this.getRolesList()
    },
    handleCurrentChange(value) {
      // 页码值的改变
      this.form.page = value
      this.getRolesList()
    },
    // 页面上新增的按钮
    addRoleBtn() {
      // 模态框打开
      this.dialogVisible = true
      // 将isEdit变量 赋值为 false
      this.isEdit = false
    },
    async addRoles() {
      try {
        const res = await addRoleRequest(this.formDialog)
        // console.log(res)
        if (res.success) {
          // 0-  添加成功以后，应该里面跳转到最后一页
          // 有个注意点： 如果最后一页已经满了，那么应该将总数量添加1，在跳转到下一页
          // 因为在判断的时候涉及到动态数据， 所有将最大的页面值，还有最后一页是否填满了，应该使用计算属性来写
          if (this.isLastPageFull) {
            this.form.page = this.maxPageNum + 1
            this.total++
          } else {
            this.form.page = this.maxPageNum
          }
          // 请求成功以后---- 业务代码的成功
          // 1 关闭弹框  2. 刷新后面的列表页面
          this.dialogVisible = false
          this.getRolesList()
        } else {
          this.$message.error(res.message)
        }
      } catch (err) {
        this.$message.error('添加角色失败')
      }
    },
    async updateRoleById() {
      try {
        const res = await updateRoleByIdRequest(this.formDialog)
        console.log('请求成功', res)
        if (res.success) {
          this.dialogVisible = false
          this.getRolesList()
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了')
      }
    },
    onSubmit() {
      // 不要在里面写try catch 发请求，要封装发请求的方法到外面去
      // console.log(this.formDialog)
      // 一种思想，同一个模态框，有两种使用场景，那么就需要我们添加一个 变量，来控制新增 和 编辑
      // this.addRoles()
      // 发请求之前,需要先校验所有的字段是否通过了前端校验,然后再发请求
      this.$refs.formRef.validate(val => {
        if (val) {
          if (this.isEdit) {
            this.updateRoleById()
          } else {
            this.addRoles()
          }
        }
      })
    },
    editRoleBtn(scope) {
      // // 打开弹出框
      this.dialogVisible = true
      // 回填数据
      // this.formDialog.name   普通函数 参数不传undeifned.row
      // vue 页码上不传参数， 默认参数就是 当前的点击事件
      this.formDialog = _.cloneDeep(scope.row)
      // 将isEdit变量赋值为true
      this.isEdit = true
    },
    dialogClosBtn() {
      this.$refs.formRef.resetFields()
      if (this.isEdit) {
        this.formDialog = this.$options.data().formDialog
      }
    },
    async deleteRoleById(id) {
      try {
        const res = await deleteRoleByIdRequest(id)
        if (res.success) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 删除成功以后,页面值怎么调整
          // 如果当前页面只剩下一条数据,我们应该把页码值向上走一页,将page-1
          if (this.tableData.length === 1) {
            this.form.page--
            if (this.form.page <= 0) {
              this.form.page = 1
            }
          }
          this.getRolesList()
        }
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    deleteRoleBtn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRoleById(id)
        // 下面这个提示,地方不对,应该是删除请求成功以后,再给提示
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  border: 1px solid red;
  ::v-deep .btn-wrap {
    margin: 15px 0;
  }
  .pagin-wrap {
    margin-top: 15px;
    text-align: right;
  }

}
</style>

